<template>
    <div>
        <v-layout row wrap>
            <v-flex xs6>
            <v-btn round color="primary" dark>品牌添加</v-btn>
            </v-flex>
            <v-flex xs6>
            <v-text-field
                    label="Prepend"
                    prepend-icon="search"
                    v-model="searchKey"
            ></v-text-field>
<!--                绑定数据 当他改变就可以直接通过监听 里面的查询 再次回显到页面-->
            </v-flex>
        </v-layout>
        <v-data-table
                :headers="headers"
                :items="desserts"
                :pagination.sync="pagination"
                :total-items="totalDesserts"
                :loading="loading"
                class="elevation-1"
        >
            <template slot="items" slot-scope="props">
                <td class="text-xs-center">{{ props.item.id }}</td>
                <td class="text-xs-center">{{ props.item.name }}</td>
                <td class="text-xs-center">{{ props.item.image }}</td>
                <td class="text-xs-center">{{ props.item.letter }}</td>
            </template>
        </v-data-table>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                totalDesserts: 0,
                desserts: [],
                loading: true,
                pagination: {},
                headers: [
                    { text: '品牌id',align: 'center', sortable: true , value: 'id' },
                    { text: '品牌名字',align: 'center',sortable: false , value: 'name' },
                    { text: 'LOGO', align: 'center',sortable: false , value: 'image' },
                    { text: '首字母', align: 'center',sortable: true , value: 'letter' },
                ],
                searchKey:""
            }
        },
        watch:{
            pagination :{ //监听分页参数
                deep:true,
                handler(){
                    this.loadBrandData();
                }
            },
            searchKey:{
                //监视搜索字段
                handler(){
                    this.loadBrandData();
                }
            }
        },
        // mounted() { //页面加载（挂载后）的时候发送请求
        //    this.loadBrandData();
        // },
        created() { //页面加载（挂载后）的时候发送请求
            this.loadBrandData();
        },
        methods: {
            loadBrandData(){
                this.loading = true;
                this.$http.get("/item/brand/page",{
                    params:{
                        //descending:false
                       //page:2
                       //rowsPerPage:5
                       //sortBy:"id"
                       //totalItems
                        key:this.searchKey,
                        page: this.pagination.page,
                        rows: this.pagination.rowsPerPage,
                        sortBy: this.pagination.sortBy,
                        desc: this.pagination.descending

                    }
                }).then((res)=>{
                    console.log(res);
                    this.desserts = res.data.items;
                    this.totalDesserts = res.data.total;
                })
                this.loading= false;
            },
        }
    }
</script>